<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
			      margin: 0;
			      padding: 0;
			      box-sizing: border-box;
			      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			    }
			#navbar{
				background:rgb(255, 255, 255);
				border-bottom:1px solid rgb(229, 231, 235) ;
				height: 64px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0 2px 10px rgba(0,0,0,0.05);
				padding: 0 2em;
			}
			.n1 span{
				font-size: 20px;
			}
			.nav-menu{
				margin: 0 2em;
			}
			.nav-menu ul{
				display: flex;
				list-style: none;
				gap: 28px;
			}
			.nav-menu a{
				text-decoration: none;
				color: #4b5563;
				font-size: 16px;
				padding: 8px 0;
				position: relative;
			}
			.n1{
				display: flex;
				gap: 10px;
				align-items: center;
			}
			
			.right-actions{
				display: flex;
				align-items: center;
				gap: 24px;
			}
			.notification-btn{
				position: relative;
				background: none;
				border: none;
				font-size: 20px;
				color: #4b5563;
				cursor: pointer;
			}
			.notification-btn:hover{
				color: red;
			}
			.user-info{
				display: flex;
				align-items: center;
				gap: 10px;
				cursor: pointer;
			}
			.user-name{
				font-size: 15px;
				
			}
		</style>
	</head>
	<body>
	  <header id="navbar">
	  	<div class="n1">
			<div class="n1-logo">
				<img src="边牧.png" width="40px" >
			</div>
	  		<span>生活管理系统</span>
	  	</div>
		<nav class="nav-menu">
			<ul>
				<li><a href="#">仪表盘</a></li>
				<li><a href="#">日程管理</a></li>
				<li><a href="#">财务管理</a></li>
				<li><a href="#">健康记录</a></li>
				<li><a href="#">待办事项</a></li>
			</ul>
		</nav>
		
		<div class="right-actions">
		      <!-- 通知按钮 -->
		      <button class="notification-btn">
		        🔔
		        <span class="notification-badge">3</span>
		      </button>
		
		      <!-- 用户信息 -->
		      <div class="user-info">
		        <div class="user-image">U</div>
		        <span class="user-name">用户名</span>
		      </div>
		    </div>
	  </header>
	</body>
</html>